<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

interface SystemSettings {
  siteName: string
  siteDescription: string
  emailNotification: boolean
  theme: 'light' | 'dark'
  language: 'zh' | 'en'
}

const settings = reactive<SystemSettings>({
  siteName: '心理测评系统',
  siteDescription: '专业的心理测评管理平台',
  emailNotification: true,
  theme: 'light',
  language: 'zh'
})

const loading = ref(false)

const handleSave = async () => {
  try {
    loading.value = true
    // TODO: 实现保存设置的逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="settings-container">
    <div class="header">
      <h2>系统设置</h2>
    </div>

    <el-form :model="settings" label-width="120px" class="settings-form">
      <el-form-item label="系统名称">
        <el-input v-model="settings.siteName" />
      </el-form-item>

      <el-form-item label="系统描述">
        <el-input
          v-model="settings.siteDescription"
          type="textarea"
          :rows="2"
        />
      </el-form-item>

      <el-form-item label="邮件通知">
        <el-switch v-model="settings.emailNotification" />
      </el-form-item>

      <el-form-item label="主题">
        <el-radio-group v-model="settings.theme">
          <el-radio value="light">浅色</el-radio>
          <el-radio value="dark">深色</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="语言">
        <el-select v-model="settings.language">
          <el-option label="中文" value="zh" />
          <el-option label="English" value="en" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSave"
        >
          保存设置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.settings-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.settings-form {
  max-width: 600px;
}
</style>